<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4624745_kowvc7tks6.css">
    <style>
        #app{
            width:800px;
            height:370px;
            margin: 50px auto;
            background-color: #fff;
            border: 1px solid gray;
            border-radius: 10px;
            position: relative;
        }
        .clearfix{
            content: "";
            display: block;
            clear: both;
        }
        .left{
            width: 200px;
            height: auto;
            float: left;
            margin-top: 50px ;
            margin-left: 120px;
            border: 1px solid gray;
        }
        .right{
            width: 350px;
            float: right;
            margin-top: 50px ;
            margin-right: 120px;
            border: 1px solid gray;
        }
        .btn{
            border: none;
            background-color: #fff;
            font-size: 18px;
            padding-left:30px ;
        }
        .mima input{
         outline: none;
         border: none;
        }
        input[type="password"]::-ms-reveal{
            display: none;
        }
        .mima ul li{
            width: 300px;
            list-style-type: none;
            padding: 6px;
            border: 1px solid rgb(179, 176, 176);
        }
        .denglu,.login{
            padding:5px 50px;
            background-color: #fff;
            border: 1px solid lightgray;
            border-radius: 5px;
            
        }
        .denglu{
            background-color: rgb(0, 106, 255);
        }
        .denglu:hover{
            background-color:rgba(0,106,255,0.5);
            color: white;
        }

        .zhanghao{
            border: 5px 5px 0 0;
        }
        .mm{
            border: 0 0 5px 5px;
        }
        .active{
            color: #7fd6f5;
        }
        .login2{
            margin: 0 40px;
            padding:5px 50px;
            background-color: rgb(0, 106, 255);
            border: 1px solid lightgray;
            border-radius: 5px;

        }
        .message li {
         list-style-type: none;
            border: 1px solid gray;
            padding: 5px;
        }
        .message li input{
            outline: none;
            border: none;
        }
    </style>
</head>
<body>
    <div id="app" class="clearfix">
    <div class="left">
       <p>扫二维码登录</p>
       <div @mouseenter="cc=false"@mouseleave="cc=true">
         <img src="img/erweima.png" alt="" v-if="cc">
         <img src="img/虎太郎.jpg" alt="" width="70%" v-else>
       </div>
    </div>
    <div class="right">
      <p>
        <button @click="a=0" type="button" class="btn" :class="{'active':a===0}">密码登录</button>
        <button @click="a=1" type="button" class="btn" :class="{'active':a===1}">短信登录</button>
    </p>
    <div>
        <div class="mima" v-if="a===0">
            <ul>
                <li class="zhanghao">账号 <input type="text" placeholder="请输入账号" v-model="zh" @input="checkout"></li>
                <li class="mm">密码 <input :type="yan?'password':'text'" placeholder="请输入密码" v-model="pwd" @input="checkout"><span @click="yan=!yan"><i v-if="yan" class="iconfont icon-yanjing-biyan"></i><i v-else class="iconfont icon-zhengyan-21"></i></span><span>忘记密码？</span></li>
            </ul>
            <button class="login">注册</button><button class="denglu" :disabled="!zh||!pwd">登录</button>
        </div>
        <div class="message" v-if="a===1">
            <ul>
                <li class="zhanghao">+86 <input type="text" placeholder="请输入手机号" @input="regsji" ><span>获取验证码</span></li>
                <li class="mm">验证码 <input type="text" placeholder="请输入验证码"></li>
            </ul>
            <button class="login2">注册/登录</button>
        </div>
    </div>
    </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let {createApp,ref}=Vue;
    createApp({
        setup(){
           let a=ref(0)
           let show=ref(true);
           let yan =ref(true);
           let zh=ref('')
           let pwd=ref('')
           let isDisabled = ref(true);
           function checkout(){
            if(/^1[3-9]\d{9}$/.test(zh.value) || '/^\d{6}$/'.test(pwd.value)){
               isDisabled=false
            }else{
              isDisabled=true
            }
           }
        let cc=ref(true)
        let sji=ref('')
        const vv=/^1[3-9]\d{9}$/
        function regsji(){
            if(vv.test(sji.value)){
                return true
            }
        }
            return{
                a,
                show,
                yan,
                zh,
                pwd,
                checkout,
                isDisabled,
                cc,
                sji,
                regsji
            }
        }
    }).mount("#app")
</script>
</html>


